﻿.range-input,
.range-input-vertical {
    outline: none;
    margin-top:10px;
    -webkit-appearance: none;
}

    /* 
  Thumb
*/

    .range-input::-ms-thumb,
    .range-input-vertical::-ms-thumb {
        border-radius: 2px;
    }

    .range-input::-ms-thumb {
        background: url("../img/arrowsforslider-horizontal.png") center center no-repeat #e5e9e8;
    }

    .range-input-vertical::-ms-thumb {
        background: url("../img/arrowsforslider.png") center center no-repeat #e5e9e8;
    }

    .range-input::-webkit-slider-thumb,
    .range-input-vertical::-webkit-slider-thumb {
        border-radius: 2px;
        background: url("../img/arrowsforslider-horizontal.png") center center no-repeat #e5e9e8;
    }

    .range-input::-webkit-slider-thumb,
    .range-input-vertical::-webkit-slider-thumb {
        -webkit-appearance: none;
    }

.range-input {
    height: 70px;
}

.range-input-vertical {
    width: 70px;
}

.range-input::-ms-thumb {
    height: 66px;
    width: 50px;
}

.range-input-vertical::-ms-thumb {
    height: 50px;
    width: 66px;
}

.range-input::-webkit-slider-thumb,
.range-input-vertical::-webkit-slider-thumb {
    height: 66px;
    width: 50px;
}

.range-input-vertical {
    -ms-writing-mode: bt-lr;
    -webkit-transform: rotate(-90deg);
}

    /*
  Active state
*/

    .range-input:active::-ms-thumb,
    .range-input-vertical:active::-ms-thumb {
        box-shadow: 0 0 0 2px orange;
    }

    .range-input:active::-webkit-slider-thumb,
    .range-input-vertical:active::-webkit-slider-thumb {
        box-shadow: 0 0 0 2px orange;
    }

    /* Track */
    .range-input::-ms-track,
    .range-input-vertical::-ms-track {
        color: transparent;
        padding: 5px;
        border: 1.5px solid orange;
        border-radius: 12px;
        background-color: white;
    }

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .range-input,
    .range-input-vertical {
color: transparent;
border: 2px solid orange;
border-radius: 12px;
background-color: white;
width: 190px;
margin-top: 90px;
height: 20px;
margin-left: -47px;
    }
}

.range-input::-ms-track {
    height: 10px;
}

.range-input-vertical::-ms-track {
    width: 10px;
    height: auto;
}

.range-input::-ms-fill-lower,
.range-input-vertical::-ms-fill-lower,
.range-input::-ms-fill-upper,
.range-input-vertical::-ms-fill-upper {
    background-color: white;
}

/* Ticks */
.range-input::-ms-ticks-before {
    height: 5px;
    padding-bottom: 0px;
}

.range-input::-ms-ticks-after {
    height: 5px;
    padding-top: 0px;
}

.range-input-vertical::-ms-ticks-before {
    width: 5px;
    padding-right: 0px;
}

.range-input-vertical::-ms-ticks-after {
    width: 5px;
    padding-left: 0px;
}

.range-input::-ms-ticks-before,
.range-input-vertical::-ms-ticks-before,
.range-input::-ms-ticks-after,
.range-input-vertical::-ms-ticks-after {
    display: block;
    color: orange;
}

.range-input::-ms-tooltip,
.range-input-vertical::-ms-tooltip {
    display: none;
}
